import brand from "@/api/brand";
import dateChoose from "@/utils/datachoose";

export default {
    name: "index",
    created() {
        this.searchPage();
    },
    data() {
        return {
            searchForm: {
                currentPage: 1,
                pageSize: 5
            },

            rules: {
                brandName: [
                    {required: true, message: '品牌名称不能为空', trigger: 'blur'},

                ],
                brandSite: [
                    {required: true, message: '品牌站点不能为空', trigger: 'blur'},
                    {type: 'url', message: '站点地址不是URL规则', trigger: 'blur'},
                ],
            },
            pickerOptions: dateChoose.pickerOptions,
            chooseDate: dateChoose.chooseDate,
            tableData: [],
            total: 0,
            selectIds: [],
            createDialog: false,
            formData: {},
            imgUrl: ''
        }
    },
    methods: {
        //增删改查操作
        async searchPage() {
            let response = await brand.searchPage(this.searchForm)
            this.total = response.total;
            this.tableData = response.data;
        },

        /**
         * 添加或者修改
         */
        addOrEdit() {
            //表单手动校验
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.createDialog = false;
                    if (this.formData.id) {
                        //修改
                        await brand.update(this.formData);
                    } else {
                        //添加
                        await brand.add(this.formData);
                    }
                    this.searchPage();
                } else {
                    this.$message.error("表单校验失败")
                    return false;
                }
            });


        },

        /*
        * findById
        * */
        async findById(id) {
            this.createDialog = true;
            this.formData = await brand.findById(id);
            this.imgUrl = this.formData.brandLogo;

        },

        /*
        * 批量删除
        * */

        async batchDeleteByIds() {
            await brand.batchDeleteByIds(this.selectIds);
            this.searchPage();
        },

        /*
        * 通过id删除
        *
        * */
        async deleteById(id) {
            await brand.deleteById(id);
            this.searchPage();
        },


        ////////////////////////页面的效果/////////////////////////////////////////
        /**
         * 点击分页回调函数
         */
        pageChange(page) {
            this.searchForm.currentPage = page;
            this.searchPage();
        },
        /**
         * 选择查询时间事件
         */
        chooseDateChange(val) {
            this.searchForm.startTime = val[0];
            this.searchForm.endTime = val[1];
        },
        /**
         * 搜索重置
         */
        resetSearchForm() {
            this.searchForm = {
                currentPage: 1,
                pageSize: 5
            };
            this.chooseDate = ""
        },
        /**
         * 勾选框事件
         */
        selectChange(val) {
            this.selectIds = val.map(item => item.id);
        },
        /**
         * 设置添加按钮的点击事件
         */
        addBtnClick() {
            this.createDialog = true;
            this.formData = {};
            this.imgUrl = ""
            this.$refs.form.resetFields();
        },
        /*
        * 点击批量删除
        * */
        showBatchDeleteDialog() {
            this.$confirm('你确定要删除id为' + this.selectIds + "几个吗", '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //点击确定
                await this.batchDeleteByIds(this.selectIds)
            })
        },
        /*
        * 文件上传
        * */
        chooseImg(e) {
            console.log(e.file);
            let fileReader = new FileReader();
            //读取文件是个异步啊哦做
            fileReader.readAsDataURL(e.file);
            fileReader.onloadend = (response) => {
                this.imgUrl = response.target.result;
                this.formData.brandLogo = response.target.result;
            }

        }

    }
}
